import React, { Component } from 'react';
import {InputItem ,Button ,Toast} from 'antd-mobile';

import styles from './qrcard.css'

import { getUserToken,getQrCardDetailWithState,updateUserCardWithState } from './actions';


class QRCardWithState extends Component {

    constructor(props){
        super(props);
        this.state = {
            time:120,
            money:0,
            cardNo:'',
        }
    }

    componentDidMount(){

        let id = this.props.match.params.id;

        let cardNo = this.props.match.params.cardNo;

        getUserToken((token) => {
           console.log(token);
        });

        getQrCardDetailWithState(id,cardNo).then(((data) => {

            let userCard = data.userCard;
            let card = data.card;
            this.setState({
                money:card.money,
                cardNo:userCard.cardNo
            })
        }))

    }

    submit = () => {

        let id = this.props.match.params.id;

        let cardNo = this.state.cardNo;

        if (cardNo == undefined || cardNo == ""){
            Toast.info('卡券不存在');
            return
        }

        updateUserCardWithState(id,cardNo).then((data) => {
            Toast.info('领取成功')
            this.props.history.push('/me')
        })
    }

    render(){
        return <div style={{padding:10,margin:10,backgroundColor:'white'}}>
                <div className={styles.title}>
                    领取{this.state.money/100}元红包
                </div>
                <div className={styles.inputContainer}>
                    卡券编号:{this.state.cardNo}
                </div>
                <Button onClick={() => {this.submit()}}  style={{marginTop:'20px', marginBottom:'10px'}} type="primary">领  取</Button>
        </div>
    }

}

export default QRCardWithState;